/**
 * 发票来源与查验
 */
import React from 'react';
import { connect } from 'react-redux'
import { messages } from "share/common"
import { Tabs } from 'antd'
import InvoiceSource from './invoice-source'
import InvoiceInspection from './invoice-inspection'
import 'styles/request-and-expense-settings/request-and-expense-settings.scss'

const TabPane = Tabs.TabPane;

class InvoiceSourceAndChecking extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabKey: 'invoice-source'
    }
  }

  componentWillMount(){
    let type = this.props.params.type;
    if(type !== ":type"){
     this.setState({
       tabKey: type,
     })
    }
  }

  renderTabs = () => {
    let tabs = [{
      key: 'invoice-source',
      name: messages('expense-2.key1')/*发票来源*/,
    }, {
      key: 'invoice-check',
      name: messages('expense-2.key2')/*发票查验服务*/,
    }, {
      key: 'invoice-recognize',
      name: messages('expense-2.key3')/*发票识别服务*/,
    }];
    return (
      tabs.map(tab => <TabPane tab={tab.name} key={tab.key}/>)
    );
  };

  renderContent = () => {
    const { tabKey } = this.state;
    const key2Content = {
      'invoice-source': <InvoiceSource/>,
      'invoice-check': <InvoiceInspection serviceTypeCode="CHECK_INVOICE"/>,
      'invoice-recognize': <InvoiceInspection serviceTypeCode="OCR"/>
    };
    return key2Content[tabKey];
  };

  render() {
    const { tabKey } = this.state;
    return (
      <div className="request-and-expense-settings-tab full-height-page">
        <Tabs activeKey={tabKey} onChange={tabKey => this.setState({ tabKey })}>
          {this.renderTabs()}
        </Tabs>
        {this.renderContent()}
      </div>
    )
  }
}

function mapStateToProps(state) {
  return { }
}

export default connect(mapStateToProps)(InvoiceSourceAndChecking)
